<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- @click="$router.push('/login')" -->
    <div  id="bar" >bar</div>
    <button v-on:click="getStartTime()" id="begin">开始计时</button>
    <button v-on:click="getEndTime()" id="end">开始计时</button>
    <div v-html="msg"></div>
  </div>
</template>
<style>
  #bar {
    color: #000;
    width: 12vw;
    height: 12vw;
    background: #00B7FF;
  }

  /*#bar:active {
    color:blue;
  }
  #bar:hover{
    color: red;
    background: gray;
  }*/
</style>
<script>
  function onTouchStart(e){
    document.getElementById("bar").style.background="green"
  }
  document.addEventListener('touchstart',onTouchStart,false);
</script>
<!--
<script>
  // @ is an alias to /src
  import HelloWorld from '@/components/HelloWorld.vue'
  var dateBegin;
  export default {
    name: 'home',
    components: {
      HelloWorld
    },
    data() {
      return {
        msg:""
      }
    },methods:{
      getStartTime:function () {
          dateBegin =new Date().getTime();
        console.log(dateBegin);
        //var dateBegin =new Date(d1.replace(/-/g, "/"));
        this.msg=dateBegin;
        return dateBegin;
      },
      getEndTime:function () {
        var dateEnd = new Date().getTime();//获取当前时间
        var dateDiff = dateEnd - dateBegin;//时间差的毫秒数
        this.msg=dateDiff;
      }
    }
  }
</script>-->
